<template>
	<view class="contacts">
		<!-- 头部 -->
		<view class="contacts-header">
			<!-- 内容 -->
			<view class="contacts-header-box">
				<text class="contacts-header-box-title">社交</text>
				<view>
					<text class="iconfont" @tap="openFriendList">&#xe61f;</text>
					<text class="iconfont" @tap="openAddNewFriend">&#xe661;</text>
				</view>
			</view>
		</view>
		<!-- 搜索栏 -->
		<view class="contacts-search">
			<view class="contacts-search-box">
				<text class="iconfont">&#xebde;</text><input type="text" placeholder="请输入" />
			</view>
		</view>
		<!-- 快捷菜单 -->
		<view class="contacts-menu">
			<view class="contacts-menu-box">
				<image src="../../static/image/tabbar/tb11.png" mode="scaleToFill"></image>
				<view>
					我的群聊
				</view>
			</view>
			<view class="contacts-menu-box">
				<image src="../../static/image/tabbar/tb21.png" mode="scaleToFill"></image><br>
				<view>
					我的好友
				</view>
			</view>
			<view class="contacts-menu-box">
				<image src="../../static/image/tabbar/tb31.png" mode="scaleToFill"></image><br>
				<view>
					我的关注
				</view>
			</view>
		</view>
		<!-- 最近消息 -->
		<view class="contacts-message">
			<view class="contacts-message-box" v-for="i in msg" @tap="goDialogue" :data-name="i.name">
				<image :src="i.img" mode="scaleToFill"></image>
				<view class="contacts-message-box-contont">
					<view class="contacts-message-box-contont-title">
						<h3>{{i.name}}</h3><text>{{i.data}}</text>
					</view>
					<view class="contacts-message-box-contont-msg">
						{{i.msg}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: [{
						img: '../../static/image/contacts/userlogo.jpg',
						name: '玄戈',
						data: '下午 6:31',
						msg: '下周五有空可以见个面么'
					},
					{
						img: '../../static/image/contacts/userlogo2.jpg',
						name: '北洛',
						data: '下午 7:41',
						msg: '你好'
					},
					{
						img: '../../static/image/contacts/userlogo3.jpg',
						name: '霓裳',
						data: '下午 8:31',
						msg: '在么'
					},
					{
						img: '../../static/image/contacts/userlogo4.jpg',
						name: '云无月',
						data: '下午 11:31',
						msg: '今天是他的生日，给他送个祝福吧'
					},
					{
						img: '../../static/image/contacts/userlogo.jpg',
						name: '岚象',
						data: '下午 6:31',
						msg: '下周五有空可以见个面么'
					},
					{
						img: '../../static/image/contacts/userlogo2.jpg',
						name: '姬轩辕',
						data: '下午 6:31',
						msg: '下周五有空可以见个面么'
					},
					{
						img: '../../static/image/contacts/userlogo3.jpg',
						name: '嫘祖',
						data: '下午 6:31',
						msg: '下周五有空可以见个面么'
					},
					{
						img: '../../static/image/contacts/userlogo4.jpg',
						name: '武曌',
						data: '下午 6:31',
						msg: '下周五有空可以见个面么'
					},
					{
						img: '../../static/image/contacts/userlogo.jpg',
						name: '赤厄阳',
						data: '下午 6:31',
						msg: '下周五有空可以见个面么'
					},
					{
						img: '../../static/image/contacts/userlogo2.jpg',
						name: '曾颖',
						data: '下午 6:31',
						msg: '下周五有空可以见个面么'
					},
				]
			}
		},
		methods: {
			/* 打开联系人菜单 */
			openFriendList: function() {
				console.log('打开联系人菜单')
			},
			/* 打开添加好友面板 */
			openAddNewFriend: function() {
				console.log('打开添加好友面板')
			},
			/* 跳转到对话详情页 */
			goDialogue: function(e) {
				const name = e.currentTarget.dataset.name;
				uni.$emit('goDialogue',{name:name})
				uni.navigateTo({
					url: 'components/dialogue/dialogue'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	/* 引入color.less */
	@import url("../../static/color.less");

	/* 引入fontSize.less */
	@import url("../../static/fontSize.less");

	/* 主体 */
	.contacts {
		background-color: #F5F5F5;
	}

	/* 头部 */
	.contacts-header {
		height: 150rpx;
		position: relative;
		background-color: @masterColor;


		/* 内容 */
		.contacts-header-box {
			display: flex;
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			color: @colorWrite;
			align-items: center;
			justify-content: space-between;

			/* 标题 */
			.contacts-header-box-title {
				padding-left: 34rpx;
				font-size: @fontBigger;
			}

			view {
				display: flex;
				align-items: center;
			}

			/* iconfont */
			.iconfont {
				margin: 0 25rpx 0 13rpx;
				font-weight: bold;
				font-size: 55rpx;
			}
		}
	}

	/* 搜索框 */
	.contacts-search {
		background-color: @colorWrite;

		/* 内容 */
		.contacts-search-box {
			padding: 19rpx 33rpx;
			position: relative;
			color: #B2B2B2;

			text {
				position: absolute;
				top: 27rpx;
				left: 63rpx;

			}

			input {
				height: 62.5rpx;
				background-color: #F2F2F2;
				text-indent: 76rpx;
			}
		}
	}

	/* 快捷菜单 */
	.contacts-menu {
		display: flex;
		padding: 20rpx 0;
		background-color: @colorWrite;
		border-bottom: 1rpx solid #EAECEB;

		.contacts-menu-box {
			width: 33vw;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			border-right: 1rpx solid #F1F1F1;

			&:last-child {
				border: none;
			}

			view {
				width: 100%;
				text-align: center;
			}
		}

		image {
			width: 86rpx;
			height: 86rpx;
		}
	}

	/* 最近消息 */
	.contacts-message {
		margin-top: 20rpx;
		background-color: @colorWrite;
		border-top: 1rpx solid #E5E5E5;

		/* 消息块 */
		.contacts-message-box {
			height: 133rpx;
			display: flex;
			align-items: center;

			image {
				width: 107rpx;
				height: 107rpx;
				margin-left: 33rpx;
				border-radius: 10rpx;
			}

			/* 消息信息 */
			.contacts-message-box-contont {
				width: 574rpx;
				height: 100%;
				margin-left: 36rpx;
				border-bottom: 1rpx solid #EBEBEB;

				/* 标题 */
				.contacts-message-box-contont-title {
					height: 40rpx;
					margin-top: 28rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						padding-right: 35rpx;
						color: #D1D1D1;
					}
				}

				/* 内容 */
				.contacts-message-box-contont-msg {
					height: 40rpx;
					margin-top: 5rpx;
					color: #989898;
				}
			}
		}
	}
</style>
